<script setup>
import { ref, onMounted, getCurrentInstance } from 'vue'
import SearchView from '@/components/SearchView.vue'
import { Download } from '@element-plus/icons-vue'
import Tokentable from './tokentable.vue'
import Pagination from '@/components/table/pagination.vue'
import { useRouter } from 'vue-router'
import { onDownload } from '@/utils/util'

const { proxy } = getCurrentInstance()
const router = useRouter()

const tokenList = ref([]);
const totalCount = ref(0);
const pageNo = ref(1);
const address = ref('');
const isInit = ref(true);
const pageSize = ref(10)
const loadingtx = ref(true)
const totalPage = ref('')
const blockNumber = ref(null)


onMounted(() => {
    // console.log(router.currentRoute.value.query.block);
    address.value = router.currentRoute.value.params.id || '';
    if (localStorage.getItem('pageSizetk')) {
        pageSize.value = parseInt(localStorage.getItem('pageSizetk'))
    }

    getTokenTransfers()
})

const getTokenTransfers = () => {
    var url = "/api/Scan/GetTokenTransfers"
    var param = {
        "pageNo": pageNo.value,
        "pageSize": pageSize.value,
        "address": router.currentRoute.value.query.a || '',
        "contract": address.value
    }
    if (blockNumber.value) {
        param["blockNumber"] = blockNumber.value
    }
    proxy.$axios.post(url, param).then((res) => {
        setTimeout(() => {
            loadingtx.value = false
        }, 500)
        if (res.code == "Success") {
            tokenList.value = res.data.list
            totalPage.value = res.data.totalPage
            totalCount.value = res.data.totalCount
        }
    })
}

const handleSizeChange = (e) => {
    loadingtx.value = true
    pageSize.value = e
    pageNo.value = 1
    getTokenTransfers()
    localStorage.setItem('pageSizetk', e)
    console.log(e);
}

const update = (e) => {
    loadingtx.value = true
    pageNo.value = e;
    getTokenTransfers()
}

</script>
<template>
    <div class="txs_box bg_box">
        <div class="container">
            <SearchView>
                <div class="s_tit">
                    <h3>Token <span v-if="tokenList[0]">{{ tokenList[0].name }} {{ tokenList[0].symbol }}</span>
                    </h3>
                </div>
            </SearchView>


            <div class="table_box">
                <el-row>
                    <el-col :md=12>
                        <div class="records">More than {{ totalCount }} transactions found
                            <p class="c999">(Showing the last {{ totalCount }} records)</p>
                        </div>
                    </el-col>
                    <el-col :md=12 v-if="tokenList && tokenList.length > 0">
                        <div class="plugin">
                            <button @click="onDownload(tokenList, 'ERC20_Data')">
                                <el-icon>
                                    <Download />
                                </el-icon>
                                <span>Download Page Data</span>
                            </button>
                            <Pagination :pageNo="pageNo" :totalPage="totalPage" @setPage="update" />
                        </div>

                    </el-col>
                </el-row>
                <el-skeleton :rows="5" :loading="loadingtx" animated>
                    <Tokentable :tokenList="tokenList" :address="address" />
                </el-skeleton>
                <el-row class="bt_row">
                    <el-col :md=12>
                        <div class="pagination">
                            <el-pagination v-if="totalCount && totalCount > 10" @size-change="handleSizeChange"
                                :page-sizes="[10, 20, 50]" :page-size="pageSize" v-model:currentPage="pageNo" layout="sizes"
                                :total="totalCount">
                            </el-pagination>
                        </div>
                    </el-col>
                    <el-col :md=12>
                        <div class="plugin">
                            <Pagination :pageNo="pageNo" :totalPage="totalPage" @setPage="update" />
                        </div>

                    </el-col>
                </el-row>
            </div>
            <div class="tips">
                <img src="../../assets/img/tips.png" alt="" />
                <p>A transaction is a cryptographically signed instruction that changes the blockchain state. Block
                    explorers
                    track the details of all transactions in the network. Learn more about transactions in our Knowledge
                    Base.</p>
            </div>
        </div>
    </div>
</template>

<style lang="less" scoped>
.t_info {
    margin: 18px 0 0;

    dl {
        background: #fff;
        border-radius: 12px;
        padding: 15px;
        box-shadow: 0px 4px 10px 2px rgba(242, 242, 247, 0.5);
        border: 1px solid #F2F2F7;
        margin-bottom: 15px;

        dt {
            color: #8F9399;
            font-size: 12px;
            font-weight: normal;
            // padding-bottom: 10px;
            text-transform: uppercase;
        }

        dd {
            font-size: 22px;

            i {
                font-size: 12px;
                color: var(--primary-color);
                padding-left: 5px;
            }
        }
    }
}

.table_box {
    font-size: 0.75rem;
    color: var(--color-text);

    :deep(.el-table__inner-wrapper:before) {
        display: none !important;
    }


    .el-row {
        margin-bottom: 20px;
    }

    .bt_row {
        margin-top: 1rem;
        margin-bottom: 0;
    }


    .records {
        font-size: 0.9rem;

        p {
            font-size: 0.8rem;
            color: var(--color-text2);
        }
    }


}



@media (min-width: 1000px) {}
</style>
